<template>
  <!-- 案例-->
  <div>
    <h2>{{ msg }}</h2>
    <div id="example" v-for="(item, index) in list" :key="index">
      <input type="checkbox" v-model="item.checked" />
      <span>{{ item.name }}</span>
      <img class="img" src="../assets/logo.png" />
      <span>￥{{ item.price }}</span>
      <input type="button" value="-" @click="sub(index)" />
      <span>{{ item.num }}</span>
      <input type="button" value="+" @click="add(index)" />
    </div>
    <p></p>
    <div>
      <!-- 只有这两个需要计算，其它的直接展示即可 -->
      <h2 class="bottom">总数量：{{ countTotal }}</h2>
      <h2 class="bottom">总价：{{ priceSumTotal }}</h2>
    </div>
  </div>
</template>

<script>
export default {
  name: "ComputedCase",
  props: {
    msg: String,
  },
  data() {
    return {
      list: [
        { name: "香蕉", price: 5, num: 1, checked: false },
        { name: "柚子", price: 4, num: 1, checked: false },
        { name: "橘子", price: 3, num: 1, checked: false },
        { name: "橙子", price: 6, num: 1, checked: false },
        { name: "葡萄", price: 9, num: 1, checked: false },
      ],
    };
  },
  /*
    计算属性 必须定义在 computer 节点中
    计算属性必须是一个function，必须有返回值
    计算属性使用时必须当作普通属性来使用，不能加()
    计算属性中不应该改变 data 中的变量值（会报错：Unexpected side effect in "plus" computed property）
  */
  computed: {
    /* 
      计算已选商品件数
    */
    countTotal() {
      let count = 0;
      this.list.forEach((element) => {
        if (element.checked) {
          count += 1;
        }
      });
      return count;
    },
    /* 
      计算已选商品的总价
    */
    priceSumTotal() {
      let sum = 0;
      this.list.forEach((element) => {
        if (element.checked) {
          sum += element.price * element.num;
        }
      });
      return sum;
    },
  },
  /* 
      methods 中的方法改变 data 中的变量值
  */
  /* 计算属性 VS 普通方法
	1. 计算属性中不应该改变 data 中的变量值（会报错：Unexpected side effect in "plus" computed property）
	2. methods 中的方法可以改变 data 中的变量值
	3. computer 有缓存，数字不变时只执行1次，性能高 
	4. methods中的函数无缓存，数字不变时也执行3次，性能不如computer */
  methods: {
    add(index) {
      if (this.list[index].num < 9) {
        this.list[index].num++;
      } else {
        console.log("已经最多了！");
      }
    },
    sub(index) {
      if (this.list[index].num > 1) {
        this.list[index].num--;
      } else {
        console.log("不能再少了！");
      }
    },
    checkedStatus() {
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].checked = !this.list[i].checked;
      }
      return this.list;
    },
  },
};
</script>

<style scoped>
.img {
  width: 30px;
  height: 30px;
}
span {
  margin: 5px;
}
.bottom {
  background-color: aqua;
  display: inline-block;
  padding: 10px;
}
</style>
